<template>
    <div class="find-password-warp">
        <div class="breadCrumb-warp">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>登录</el-breadcrumb-item>
                <el-breadcrumb-item>找回密码</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="step-warp">
            <el-steps :active="active" finish-status="success">
                <el-step title="确认账号"></el-step>
                <el-step title="重置密码"></el-step>
                <el-step title="重置状态"></el-step>
            </el-steps>
        </div>
        <div class="step-content-warp">
            <div v-if="active==0" style="width:50%;margin:0 auto;">
                <div><el-input v-model="inputEmail" placeholder="请输入你的邮箱"></el-input></div>
                <div style="padding-top:30px;"><el-button style="width:100%;" type="primary" @click="emailConfirm">确认</el-button></div>
            </div>
            <div v-if="active==1">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="新密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <div style="display:flex;align-items: center;justify-content:space-between;">
                            <div><span>{{inputEmail}}</span></div>
                            <div><el-button size="small" @click="preStep">修改</el-button></div>
                        </div>
                    </el-form-item>
                    <el-form-item label="验证" prop="code">
                        <div style="display:flex;justify-content: space-between;">
                            <div style="flex:5;"><el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input></div>
                            <div style="flex:1;"></div>
                            <div style="flex:1;"><el-button style="width:100%;" :disabled="verifyCodeBtnDisable" type="primary" @click="getEmailVerifyCode">{{verifyCodeBtnText}}</el-button></div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">清空</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="active==2" class="reslut-warp">
                <el-progress type="circle" :percentage="resetProgress" :color="colors"></el-progress>
                <h3 v-if="resetProgress==100" style="color:#67C23A;padding-top:30px;">恭喜您，密码重置成功</h3>
                <h3 v-else style="color:#909399;padding-top:30px;" >正在重置您的密码请稍后。。。</h3>
            </div>
        </div>
    </div>
</template>

<script>
import {request} from '@/network/request.js';
export default {
    name:"FindPassword",
    data(){
        return{
            colors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#6f7ad3', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#67C23A', percentage: 100}
            ],
            progressTimer:"",
            resetProgress:0,
            verifyCode:"",
            verifyCodeBtnText:"获取验证码",
            verifyCodeBtnDisable:false,
            verifyCodeTimer:"",
            active:0,
            inputEmail:"",
            ruleForm:{
                pass:"",
                checkPass:"",
                code:""
            },
            rules:{
                pass:[
                    {
                        validator:(rule, value, callback)=>{
                            if (value === '') {
                                callback(new Error('请输入密码'));
                            } else {
                                if (this.ruleForm.checkPass !== '') {
                                    this.$refs.ruleForm.validateField('checkPass');
                                }
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                checkPass: [
                    {
                        validator:(rule, value, callback)=>{
                            if (value === '') {
                            callback(new Error('请再次输入密码'));
                            } else if (value !== this.ruleForm.pass) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                code:[
                    {
                        validator:(rule,value,callback)=>{
                            if(!value){
                                return callback(new Error('请填入验证码'));
                            }
                            if(value!=this.verifyCode){
                                callback(new Error('请输入正确的验证码'));
                            }else{
                                callback();
                            }
                        },
                        trigger:'blur'
                    }
                ]
            }
        }
    },
    methods:{
        preStep(){
            this.active--;
        },
        emailConfirm(){
            if(this.inputEmail===''){
                this.$message({
                    message: '警告，输入的内容不能为空',
                    type: 'warning'
                });
            }else{
                request({
                url:"/user/emailExists/"+this.inputEmail
            }).then(res=>{
                if(res.data.exists){
                    this.active++;
                }else{
                    this.$alert('请输入正确的邮箱', '警告', {
                    confirmButtonText: '确定',
                    callback: action => {
                        }
                        });
                }
            }).catch(err=>{
                console.log(err);
                this.$message.error('很抱歉该服务暂时不可用请稍后再试');
            })
            }
        },
        getEmailVerifyCode(){
          //发送邮件并设置60秒计时
            //设置倒计时
            let _that=this;
            let time=60;
            this.verifyCodeBtnDisable=true;
            this.verifyCodeBtnText="60s";
            this.verifyCodeTimer=setInterval(()=>{
            time--;
            _that.verifyCodeBtnText=time+"s";
            if(time<=0){
                _that.verifyCodeBtnDisable=false;
                _that.verifyCodeBtnText="获取验证码";
                clearInterval(_that.verifyCodeTimer);
                }
            },1000);
            //发送邮件
            request({
            url:"/user/emailVerifyCode/"+this.inputEmail
            }).then(res=>{
            if(res.data.status==="ok"){
            this.verifyCode=res.data.code;
            }
            }).catch(err=>{
            console.log(err);
            })
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                // alert('submit!');
                request({
                    url:"/user/changePassword",
                    method:"post",
                    data:{
                        email:this.inputEmail,
                        newPassword:this.ruleForm.pass
                    }
                }).then(res=>{
                        this.active++;
                        let _that=this;
                        this.progressTimer = setInterval(()=>{
                        _that.resetProgress+=25;
                        if(_that.resetProgress>=100){
                            clearInterval(_that.progressTimer);
                        }
                    },600);
                        this.verifyCode="";
                }).catch(err=>{
                    this.$message.error('服务器忙请稍后再试');
                    this.verifyCode="";
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        }
    },
    beforeDestroy(){
        if(this.verifyCodeTimer){
            clearInterval(this.verifyCodeTimer);
        }
        if(this.progressTimer){
            clearInterval(this.progressTimer);
        }
    }
}
</script>

<style>
.find-password-warp {
    min-height: 850px;
    width: 50%;
    margin: 0 auto;
    padding: 10px;
}
.breadCrumb-warp {
    padding: 10px 0;
}
.step-warp {
    padding: 10px 30px;
    padding-bottom: 40px;
}
.reslut-warp {
    text-align: center;
}
</style>